<template>
  <div
    style="height:853px; padding-bottom:37px;overflow:auto;overflow-x:hidden;"
  >
    <el-form ref="ruleForm" :inline="true" :model="ruleForm" :rules="myRules">
      <!-- <el-form-item label="描述" prop="description" :label-width="'150px'">
        <el-input v-model="ruleForm.description" auto-complete="off"></el-input>
      </el-form-item> -->
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="描述xuanze"
        prop="description"
        :label-width="'150px'"
      >
        <el-select
          v-model="ruleForm.description"
          auto-complete="off"
          placeholder="请选择"
          style="padding-left:15px;width:96.7%;margin-bottom:-30px;"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
          <!-- <el-option
            style="font-size:20px"
            v-for="(item, index) in cameraList"
            :key="index"
            :value="item"
            :label="item"
          ></el-option> -->
        </el-select>
        <!-- <el-input v-model="ruleForm.description" auto-complete="off"></el-input> -->
      </el-form-item>
      <el-form-item label="123" prop="camera_number">
        <!-- <div style="margin-top:20px;">
          <span class="cameraStyle">cameraNum<br /></span> -->

        <el-select
          v-model="ruleForm.camera_number"
          placeholder="请选择"
          style="padding-left:15px;width:96.7%;margin-bottom:-30px;"
        >
          <el-option
            style="font-size:20px"
            v-for="(item, index) in cameraList"
            :key="index"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>

        <!--</el-form> -->
        <!-- </div> -->
      </el-form-item>
      <el-form-item label="描述222" prop="description" :label-width="'150px'">
        <el-input v-model="ruleForm.description" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- <div style="text-align: center"> -->
        <el-button @click="submit('ruleForm')">开始测试</el-button>
        <!-- </div> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//import { mapState, mapGetters, mapActions } from "vuex";
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      // camera_number: "",
      ruleForm: {
        camera_number: "",
        description: "",
        region: ""
      },
      myRules: {
        camera_number: [
          {
            // type: "string",
            required: true,
            // pattern: "[^ \x22]+",
            message: "不能为空",
            trigger: "blur"
          }
        ],
        description: [
          {
            // type: "string",
            required: true,
            // pattern: "[^ \x22]+",
            message: "111不能为空",
            trigger: ["blur", "change"]
          }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ]
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      formSchema: {
        type: "object",
        properties: {
          ip: {
            type: "string",
            value: "192.168.9.85",
            ui: {
              columns: 6,
              label: "ip"
            }
          },
          port: {
            type: "number",
            value: "443",
            ui: {
              columns: 6,
              label: "port"
            }
          },
          user: {
            type: "string",
            value: "admin",
            ui: {
              columns: 6,
              label: "user"
            }
          },
          // cameraNum: {
          //   type: "string",
          //   // value: "51b4eca4-3d7c-4a7d-82dc-71fdcbc35e84",
          //   // value: this.cameraList[0].match(/(\S*),/)[1],
          //   value: this.cameraList[0],
          //   ui: {
          //     columns: 6,
          //     label: "cameraNum",
          //     widget: "select",
          //     widgetConfig: {
          //       enumSource: [
          //         {
          //           value: "51b4eca4-3d7c-4a7d-82dc-71fdcbc35e83",
          //           label: "51b4eca4-3d7c-4a7d-82dc-71fdcbc35e83"
          //         },
          //         {
          //           value: "51b4eca4-3d7c-4a7d-82dc-71fdcbc35e84",
          //           label: "51b4eca4-3d7c-4a7d-82dc-71fdcbc35e84"
          //         },
          //         {
          //           value: "51b4eca4-3d7c-4a7d-82dc-71fdcbc35e85",
          //           label: "51b4eca4-3d7c-4a7d-82dc-71fdcbc35e85"
          //         },
          //         {
          //           value: "baee05a7-166a-48f8-9a57-3754c1a7ac65",
          //           label: "baee05a7-166a-48f8-9a57-3754c1a7ac65"
          //         },
          //         {
          //           value: "aef89ecc-4cc6-4a6d-80fd-283196105b0b",
          //           label: "aef89ecc-4cc6-4a6d-80fd-283196105b0b"
          //         }
          //       ]
          //     }
          //   }
          // },
          videoType: {
            type: "number",
            value: 0,
            ui: {
              columns: 6,
              label: "videoType",
              widget: "select",
              widgetConfig: {
                enumSource: [
                  {
                    value: 0,
                    label: "0 (低码流)"
                  },
                  {
                    value: 1,
                    label: "1 (高码流)"
                  }
                ]
              }
            }
          },
          command: {
            type: "object",
            properties: {
              serverIp: {
                type: "string",
                value: "192.168.9.95",
                ui: {
                  columns: 6,
                  label: "serverIp"
                }
              },
              serverPort: {
                type: "number",
                value: "1935",
                ui: {
                  columns: 6,
                  label: "serverPort"
                }
              },
              pubName: {
                type: "string",
                value: "/live",
                ui: {
                  columns: 6,
                  label: "pubName"
                }
              },
              authInfo: {
                type: "string",
                value: "",
                ui: {
                  columns: 6,
                  label: "authInfo"
                }
              },
              video: {
                type: "object",
                properties: {
                  width: {
                    type: "string",
                    value: "352.0",
                    ui: {
                      columns: 6,
                      label: "width"
                    }
                  },
                  height: {
                    type: "string",
                    value: "288.0",
                    ui: {
                      columns: 6,
                      label: "height"
                    }
                  },
                  bitrate: {
                    type: "number",
                    value: "512",
                    ui: {
                      columns: 6,
                      label: "bitrate"
                    }
                  },
                  iframe: {
                    type: "number",
                    value: "50",
                    ui: {
                      columns: 6,
                      label: "iframe"
                    }
                  },
                  framerate: {
                    type: "number",
                    value: "25",
                    ui: {
                      columns: 6,
                      label: "framerate"
                    }
                  }
                },
                ui: {
                  label: ""
                }
              }
            },
            ui: {
              label: ""
            }
          }
        }
      }
    };
  },
  props: ["queryType"],
  computed: {
    ...mapState(["cameraList"])
    // cameranumResults: function() {
    //   var final_results = {};
    //   final_results.camera = this.sendOutParams.analyses.split(
    //     "****************************** 结果如下 ******************************"
    //   )[
    //     this.sendOutParams.analyses.split(
    //       "****************************** 结果如下 ******************************"
    //     ).length - 1
    //   ];
    //   final_results.code = this.sendOutParams.code;
    //   final_results.msg = this.sendOutParams.msg;
    //   return final_results;
    // }
  },
  methods: {
    ...mapActions(["getQueryInfo"]),
    submit(formName) {
      this.$refs[formName].validate(valid => {
        console.log("ininini");
        if (valid) {
          console.log("12345");
          alert("submit!");
          this.getQueryInfo(sendParams);
        } else {
          console.log("54321");

          alert("false!");
          return false;
        }
      });
      // console.log("test_cameraL:", this.cameraString);
      // console.log("test_cameralist:", this.cameraList);
      // let sendParams = {
      //   queryType: this.queryType
      // };
      // let json_data_string = JSON.stringify(
      //   this.$data.formSchema.value,
      //   null,
      //   2
      // );
      // let json_data = JSON.parse(json_data_string);
      // console.log("videoTanBegin_json_data：：", json_data);
      //var obj = json_data.parseJSON();
      // let arr = [];
      // arr.push(json_data);
      // // console.log("arr:", arr);
      // arr[0].queryType = this.queryType;
      // console.log("arr:", arr);
      // let params = JSON.stringify(arr);
      // console.log("arr2:", params)

      //json_data["queryType"] = this.queryType;
      // let params = {
      //   sendParams,
      //   json_data
      // };
      // consolje.log("videoTanBegin_params",params);

      // let videoType = this.videoType === "1 (高码流)" ? "1" : "0";
      let height_float = parseFloat(this.formSchema.value.command.video.height);
      let width_float = parseFloat(this.formSchema.value.command.video.width);
      let sendParams = {
        queryType: this.queryType,
        ip: this.formSchema.value.ip,
        port: this.formSchema.value.port,
        user: this.formSchema.value.user,
        cameraNum: this.camera_number,
        videoType: this.formSchema.value.videoType,
        serverIp: this.formSchema.value.command.serverIp,
        serverPort: this.formSchema.value.command.serverPort,
        pubName: this.formSchema.value.command.pubName,
        authInfo: this.formSchema.value.command.authInfo,
        width: width_float,
        height: height_float,
        bitrate: this.formSchema.value.command.video.bitrate,
        iframe: this.formSchema.value.command.video.iframe,
        framerate: this.formSchema.value.command.video.framerate
      };
      console.log("sendParams：", sendParams);

      // this.$refs[formName].validate(valid => {
      //   console.log("ininini");
      //   if (valid) {
      //     console.log("12345");
      //     alert("submit!");
      //     this.getQueryInfo(sendParams);
      //   } else {
      //     console.log("54321");

      //     alert("false!");
      //     return false;
      //   }
      // });

      // this.getQueryInfo(params);

      // this.$ncformValidate("your-form-name").then(data => {
      //   if (data.result) {
      //     alert(JSON.stringify(this.$data.formSchema.value, null, 2));
      //     //console.log(this.$data.formSchema.value);
      //     // do what you like to do
      //   }
      // });
    }
  }
};
</script>

<style>
.cameraStyle {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
  /* float: left; */
  line-height: 40px;
  padding: 0 12px 0 0 !important;
  box-sizing: border-box;
  color: #0d285d;
  margin-left: 15px;
}
.__object-form-item {
  /* margin-top: 0px !important; */
}
</style>
